import RightPanel from '../../rightPanel/RightPanel'
import { getImage } from '@/utils/getImg'
import { useState } from 'react'
import './right.less'
import { useDispatch, useSelector } from 'react-redux'
import { setMapFun } from '@/store/mapFunSlice.js'

const Right = () => {
  const dispatch = useDispatch()

  const [taskImgData, setTaskImgData] = useState([
    { name: '任务总量', value: 145, unit: '次' },
    { name: '累计架次', value: 1236, unit: '架次' },
    { name: '累计覆盖面积', value: 3401.5, unit: 'km²' },
    { name: '累计里程', value: 8465.1, unit: 'km' },
  ])

  const [uavList, setUavList] = useState([
    {
      taskSubject: '日常河道巡检',
      name: '20250525河道巡检',
      uavnum: 1,
      flyhandernum: 2,
      cycleInterval: 7,
      circleNum: 1,
      execStartTime: '2025-05-25 08:00',
      execEndTime: '2025-05-25 18:00',
      planaddress: '河道A段',
      isError: false,
      view: 1,
      line: [
        [113.13542859040261, 27.862787045733693, 40],
        [113.13517373553032, 27.86267656811976, 43.33],
        [113.13498250911209, 27.862611854488033, 46.67],
        [113.13474858549255, 27.862625107684128, 50],
        [113.13456293837581, 27.86267768341483, 53.33],
        [113.13440384285353, 27.86273440947291, 56.67],
        [113.13423154439197, 27.862769524699186, 60],
        [113.13410337791152, 27.862778692304335, 56],
        [113.13388726114381, 27.862760028628845, 52],
        [113.13364743947439, 27.862681168085686, 48],
        [113.13348502689539, 27.86257243870251, 44],
        [113.13322699821848, 27.86241081215771, 42],
        [113.13303906377061, 27.862266218294813, 40],
      ],
    },
    {
      taskSubject: '日常森林巡检',
      name: '20250525森林巡检',
      uavnum: 2,
      flyhandernum: 4,
      cycleInterval: 7,
      circleNum: 1,
      execStartTime: '2025-05-25 08:00',
      execEndTime: '2025-05-25 18:00',
      planaddress: '森林B段',
      isError: true,
      view: 1,
      line: [
        [113.14499416867304, 27.863487665167735, 0],
        [113.14499420867304, 27.863487665167735, 20],
        [113.14499425867304, 27.863487665167735, 30],
        [113.14499430867304, 27.863487665167735, 40],
        [113.14515097865662, 27.86320898175109, 32],
        [113.14552106040881, 27.862866181507183, 34],
        [113.14621823112455, 27.862701040682797, 36],
        [113.14684251481674, 27.862752247552525, 32],
        [113.14684252081674, 27.862752247552525, 20],
        [113.14684252481674, 27.862752247552525, 12],
        [113.14684253081674, 27.862752247552525, 0],
        // [113.14700936282894, 27.86309339997993, 30],
        // [113.14645864476105, 27.86332688612943, 25],
        // [113.14595704155107, 27.863341730988864, 22],
        // [113.14595710155107, 27.863341730988864, 15],
        // [113.14595715155107, 27.863341730988864, 7],
        // [113.14595720155107, 27.863341730988864, 0],
      ],
    },
  ])

  const [activeCardIndex, setActiveCardIndex] = useState(-1)

  const choiceOne = (data, index) => {
    if (activeCardIndex === index) {
      setActiveCardIndex(-1)
      dispatch(setMapFun({ type: 'fly', status: 0 }))
      return
    }
    setActiveCardIndex(index)
    if (data.line) {
      dispatch(
        setMapFun({
          type: 'fly',
          status: 1,
          data: {
            line: data.line,
            view: data.view,
          },
        })
      )
    }
  }
  return (
    <RightPanel>
      <div className="right-wrj">
        <div className="global-header-title">
          <span>航飞任务概览</span>
        </div>

        <div className="task-img-list">
          {taskImgData.map((option, index) => (
            <div className="task-img-item" key={index}>
              <img src={getImage(`/wrj/hangfei${index + 1}.png`)} />
              <div className="task-desc">
                <div className="value">
                  {option.name === '累计覆盖面积' || option.name === '累计里程'
                    ? option.value.toFixed(1)
                    : option.value}
                  <span>{option.unit}</span>
                </div>
                <div className="name">{option.name}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="air-task">
          <div className="desc">任务执行</div>
        </div>

        <div className="uav-land-card-data">
          {uavList.map((item, index) => (
            <div
              onClick={() => {
                choiceOne(item, index)
              }}
              className={`uav-land-card ${
                activeCardIndex === index ? 'uav-card-active' : ''
              }`}
              key={index}
            >
              <div className="label">
                <div className="label-detail">{item.taskSubject}</div>
              </div>
              {item.isError ? (
                <div className="error-class"></div>
              ) : (
                <div className="normal-class"></div>
              )}
              <div className="content">
                <div className="name">
                  <div className="name-text">{item.name}</div>
                </div>
                <div className="people-uav">
                  <img src={getImage(`/wrj/uav.png`)} alt="" />
                  <div className="num">{item.uavnum}</div>
                  <div className="unit">架</div>
                  <img src={getImage(`/wrj/people.png`)} alt="" />
                  <div className="num">{item.flyhandernum}</div>
                  <div className="unit">人</div>
                </div>
                {/* <div className="cycle-num">
                <div className="unit-before">周期</div>
                <div className="num">{item.cycleInterval}</div>
                <div className="unit">天</div>

                <div className="unit-before">期数</div>
                <div className="num">{item.circleNum}</div>
                <div className="unit">期</div>
              </div> */}
                <div className="time">
                  <img src={getImage(`/wrj/time.png`)} alt="" />
                  <div>
                    {item.execStartTime}~ {item.execEndTime}
                  </div>
                </div>
                <div className="location">
                  <img src={getImage(`/wrj/locatin.png`)} alt="" />
                  <div className="locatin-detai" title={item.planaddress}>
                    {item.planaddress}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </RightPanel>
  )
}
export default Right
